<!--
 * @Author: 菅书繎 2032642089@qq.com
 * @Date: 2025-09-11 08:40:43
 * @LastEditors: 菅书繎 2032642089@qq.com
 * @LastEditTime: 2025-09-16 10:53:18
 * @FilePath: \大三上 前端\city\src\pages\components\Map.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div style="height: 100%;">
        <!-- 提供地图容器 -->
        <div ref="map" style="height: 100%;"></div>
    </div>
</template>
<script>
//引入get请求
import { get } from '@/utils/request';
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            //存放所有的设备信息
            deviceData:[]
        }
    },
    methods: {
        ...mapMutations(['SET_ED']),
        //封装加载地图的函数
        loadMap() {
            AMapLoader.load({
                key: "f3766ca737bb76b2466a1ef83cc8be01", //申请好的Web端开发者 Key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            })
                .then((AMap) => {
                    //创建地图图层
                    const map = new AMap.Map(this.$refs.map, {

                        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                        viewMode: '3D', //地图模式
                        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                        zoom: 17, //初始化地图层级
                        rotation: -15, //初始地图顺时针旋转的角度
                        zooms: [2, 20], //地图显示的缩放级别范围
                        center: [103.76, 36.07], //初始
                        // mapStyle: "amap://styles/normal", //设置地图的显示样式
                         viewMode: '3D', //地图模式
                        terrain: true //开启地形图
                    });
                    const traffic = new AMap.TileLayer.Traffic({
                        autoRefresh: true, //是否自动刷新，默认为false
                        interval: 180, //刷新间隔，默认180s
                    });
                    map.add(traffic); //通过add方法添加图层
                    // var that = this;
                    //异步加载控件
                    AMap.plugin(['AMap.ToolBar', 'AMap.HawkEye', 'AMap.ControlBar'], function (){
                        // var toolbar = new AMap.ToolBar({
                        //     position:'LB'
                        // }); //缩放工具条实例化
                        // map.addControl(toolbar); //添加控件 //toolbar.show()
                        // var hawkEye = new AMap.HawkEye();
                        // map.addControl(hawkEye);
                        var controlBar = new AMap.ControlBar({ //控制地图旋转插件
                            position: {
                                right: '10px',
                                top: '10px'
                            }
                       });
                        map.addControl(controlBar);
                        var toolBar = new AMap.ToolBar({ //地图缩放插件
                            position: {
                                right: '40px',
                                top: '110px'
                            }
                        });
                        map.addControl(toolBar);
                        var hawkEye = new AMap.HawkEye();//鹰眼 
                        map.addControl(hawkEye);
                    });

                    //遍历设备数组
                    this.deviceData.forEach(item => {
                        const marker = new AMap.Marker({
                            position:item.position,//[]
                            title: item.name,
                            //携带用户自定义数据
                            extData:item
                        });
                        //给标记点绑定事件
                        var that=this;
                        marker.on('click', function () {
                            //this --->指向的是标记点
                            //获取用户自定义数据
                            console.log(this.getExtData()),
                            that.SET_ED({
                            
                                engineer_id:this.getExtData().engineer_id,
                                device_id:this.getExtData().id 
                            })
                         
                        })
                        map.add(marker);

                    })
                  
                })
           
                .catch((e) => {
                    console.error(e); //加载错误提示
                });
        },
        //封装获取工程设备树
        async getEngData(){
            let res = await get('/dashboard/findEngineerDeviceTree');
           console.log(res,'工程设备树');
           /**
            * 返回的res.data数组[{id:1,name:"一号工程",children:[{
            * id:1,
            * name:"",
            * position:[经度，维度]
            * }]，{}{}{}}
            */
           //将所以设备信息全部存放在数组中
           let temp=[];
           res.data.forEach(item=>{
                if(item.children.length>0){
                    item.children.forEach(it=>{
                        temp.push(it);
                    })
                }  
           });
           console.log(temp);
           this.deviceData=temp;
        }
    },
    
        
    async  mounted() {
        await this.getEngData();
        this.loadMap();
    }

}

</script>
<style lang="less" scoped></style>